<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>


    <script th:src="@{/js/mui.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/mui.css}">

    <style>

        .a-upload {
            padding: 0px 0px;
            height: 30px;
            width: 180px;
            line-height: 30px;
            position: relative;
            cursor: pointer;
            color: #888;
            background: #fafafa;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            display: inline-block;
            *display: inline;
            *zoom: 1;
            text-align: center;
            top: 10px;
        }

        .a-upload  input {
            text-align: center;
            position: absolute;
            font-size: 100px;
            right: 0;
            line-height: 30px;
            top: 0px;
            opacity: 0;

            filter: alpha(opacity=0);
            cursor: pointer
        }

        .a-upload:hover {
            color: #444;
            background: #eee;
            border-color: #ccc;
            text-decoration: none
        }
    </style>

    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
</head>
<body >
<div style="height: auto">
  <span style="margin-left: 36%; font-size: x-large;line-height:100%;margin-top: 50px; ">新增商户</span>
</div>
<br>
<form class="mui-input-group" autocomplete="off" style="height: 100%;">
    <br>
    <div class="mui-input-row">
        <label>商户id:</label>
        <input type="text" class="mui-input-clear" placeholder="请输入商户id" id="strUid" autocomplete="off" >
    </div>
    <br>
  <!--  <img src="/upload/bb.png">-->
    <div class="mui-input-row">
        <label>商户名:</label>
        <input type="text" class="mui-input-clear" placeholder="请输入商户名" id="strName" autocomplete="off" >
    </div>
    <br>

    <div class="mui-input-row">
        <label>商户电话:</label>
        <input type="text" class="mui-input-clear" placeholder="请输入商户名" id="strNumber" autocomplete="off" >
    </div>
    <br>


    <div class="mui-input-row">
        <label>商户地址:</label>
        <input type="text" class="mui-input-clear" placeholder="请输入商户详细地址" id="strSeat" autocomplete="off" >
    </div>

   <!-- <div class="mui-input-row">
        <label>上传</label>
        <input type="text" class="mui-input-clear" placeholder="请上传商户照片" id="ab" autocomplete="off" >
    </div>-->
    <br>
    <div class="form-group">
            <label>上传店面照:</label>
        <a href="javascript:;" class="a-upload" style="text-align: center">
                <input type="file" name="logoFile" id="logoFile" class="mui-input-clear" placeholder="请上传商户照片">选择文件
        </a>
            <div class="col-sm-10">
            <input type="hidden" name="img"  id="photoUrl"/>

            <br>
            <span><img id="photourlShow" th:src="@{/upload/bb.png}" width="300" height="197"/></span>
            </div>
    </div>
    <br>


    <div class="form-group">
            <label>位置摆放照:</label>
            <a href="javascript:;" class="a-upload" style="text-align: center">
                <input type="file" name="logFile" id="logFile" class="mui-input-clear" placeholder="请上传商户照片">选择文件
            </a>
            <div class="col-sm-10">
            <input type="hidden" name="img"  id="photUrl"/>

        <br>
            <span><img id="photurlShow" th:src="@{/upload/bb.png}" width="300" height="197"/></span>
            </div>
    </div>
    <br>




    <div class="mui-button-row">
        <button type="button" class="mui-btn mui-btn-primary" id="uploads" >确认</button>
        <button type="button" class="mui-btn mui-btn-danger" id="cansolUp" >取消</button>
    </div>

</form>
<script th:src="@{/js/toast_367A9.js}"></script>
<script th:src="@{/js/jquery-1.8.2.min.js}"></script>
<script type="text/javascript" >


    $(function(){
        var data  =localStorage.getItem("loginuser");
        var  loginUser = JSON.parse(data);
        if (loginUser==null){
            window.location.href="/user/login";
        }


        $("#logoFile").change(function () {
          // var photourlShow=document.getElementById("photourlShow");
            //var photoUrl=document.getElementById("photoUrl");
            //alert("dada");
            setImg(this,"photourlShow","photoUrl");
        });

        $("#logFile").change(function () {

            setImg(this,"photurlShow","photUrl");
        });


        $("#strNumber").blur(function () {
            phoneNuberCheck();
        });

        $("#cansolUp").click(function () {
            history.back(-1);
        });


        $("#uploads").click(function () {

            var strUid= $("#strUid").val();
            var strName= $("#strName").val();
            var strSeat= $("#strSeat").val();
            var photoUrl =$("#photoUrl").val();
            var photUrl =$("#photUrl").val();
            var phoneNuber =$("#strNumber").val();


            if (strUid==""){
              //ToastShow("商户id不能为空");
                mui.confirm(
                    "商户id不能为空", '提示',['确定'],null
                );
              return false;
          }
            if (strName==""){
             // ToastShow("商户名不能为空");
                mui.confirm(
                    "商户名不能为空", '提示',['确定'],null
                );
              return false;
            }
            if (strSeat==""){
             // ToastShow("商户地址不能为空");
                mui.confirm(
                    "商户地址不能为空", '提示',['确定'],null
                )
              return false;
            }
            if (photoUrl==""){
               // ToastShow("照片不能为空");
                mui.confirm(
                    "照片不能为空", '提示',['确定'],null
                )
                return false;
            }if (!/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(phoneNuber)|| !(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phoneNuber))||phoneNuber==""){
                mui.confirm(
                    "电话号码不正确", '提示',['确定'],null
                )
                return false;
            }


            var json={
                userid:strUid,
                name:strName,
                seat:strSeat,
                picture:photoUrl,//商家位置照片
                pictureSeat:photUrl,//摆放位置照片
                phoneNuber:phoneNuber,
                voUserid:loginUser.id,
                createTime:new Date().toLocaleString()
            };
            $.ajax({
                url : "/store/doAdd",
                type: 'POST',
                dataType:'json',
                contentType:"application/json",
                data: JSON.stringify(json),
                dataType:"text",

                success : function(data) {

                    var dats=JSON.parse(data);

                    if (dats.status==200){

                        ToastShow("上传成功");

                        window.location.href="/user/index";
                    } else{

                        ToastShow(dats.msg);
                    }
                },
                error : function(req, err, ex) {
                    $("#txtRep").val(req.responseText + "\r\n" + err + "\r\n" + ex);
                }
            });


        });




    })


    function phoneNuberCheck() {

            var phone = document.getElementById('strNumber').value;
            if(!/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(phone)|| !(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))){
                mui.confirm(
                    "电话号码格式不正确", '提示',['确定'],null
                )
                return false;
            }
    }





    function setImg(obj,show,url){


        var f=$(obj).val();


        if(f == null || f ==undefined || f == ''){
            return false;
        }
        if(!/\.(?:png|jpg|bmp|gif|PNG|JPG|BMP|GIF)$/.test(f))
        {
            alert("类型必须是图片(.png|jpg|bmp|gif|PNG|JPG|BMP|GIF)");
            $(obj).val('');
            return false;
        }
        var data = new FormData();

        $.each($(obj)[0].files,function(i,file){
            data.append('file', file);
        });

        $.ajax({
            type: "POST",
            url: "/user/doupload",
            data: data,
            cache: false,
            contentType: false,    //不可缺
            processData: false,    //不可缺
            dataType:"json",
            success: function(ret) {
                console.log(ret.status);
                    if (ret.status==200){
                       // $("#photourlShow").attr("src",ret.data);//显示图片
                       // $("#photoUrl").val(ret.data);//将地址存储好

                        $("#"+show).attr("src",ret.data);//显示图片
                        $("#"+url).val(ret.data);//将地址存储好
                    }else {
                        alert("上传失败，请检查网络后重试");
                    }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert("上传失败，请检查网络后重试");
            }
        });
    }



</script>
</body>

</html>